<template>
  <div class="planeList-wrapper">
    <v-header title="贵阳 → 黎平"></v-header>
        <div>
            <div class="gridWrapper">
                <card>
                        <div slot="content" class="card-demo-flex">
                            <div class="vux-1px-r" v-for="(item, index) in priceList" :key="index" @click="handleColor(index)">
                                <p>{{item.day}}</p>
                                <p>{{item.date}}</p>
                                <p>{{item.price}}</p>
                            </div>
                            <div class="vux-1px-r calendarWrapper">
                                <i class="fa fa-calendar-minus-o fa-3x" aria-hidden="true"></i>
                                <p>
                                    价格日历
                                </p>
                            </div>
                        </div>
                </card>
                <scroll  style="overflow: hidden;height: 100%" ref="scroll"
                    :style="{height: scrollHeight}">
                    <div>
                        <div class="planeContent">
                            <div class="planeWrapper">
                                <div class="timeContent">
                                    <p class="startTime">22:10</p>
                                    <p class="planeRight">
                                        <span>2小时25分</span>
                                        <img :src="planeRightImage" alt="">
                                    </p>
                                </div>
                                <div class="priceContent">
                                    <p class="finishTime">00:35</p>
                                    <p class="price">¥830</p>
                                </div>
                            </div>
                            <div class="stationWrapper">
                                <div class="startWrapper">
                                    <p class="start">浦东T2</p>
                                </div>
                                <div class="finishWrapper">
                                    <p class="finish">首都T1</p>
                                    <p class="pray">6.7折</p>
                                </div>
                            </div>
                            <div class="planeCompany">
                                <p>海南航空Y87612 | 波音78A(大)</p>
                            </div>
                        </div>

                        <div class="planeContent">
                            <div class="planeWrapper">
                                <div class="timeContent">
                                    <p class="startTime">22:10</p>
                                    <p class="planeRight">
                                        <span>2小时25分</span>
                                        <img :src="planeRightImage" alt="">
                                    </p>
                                </div>
                                <div class="priceContent">
                                    <p class="finishTime">00:35</p>
                                    <p class="price">¥830</p>
                                </div>
                            </div>
                            <div class="stationWrapper">
                                <div class="startWrapper">
                                    <p class="start">浦东T2</p>
                                </div>
                                <div class="finishWrapper">
                                    <p class="finish">首都T1</p>
                                    <p class="pray">6.7折</p>
                                </div>
                            </div>
                            <div class="planeCompany">
                                <p>海南航空Y87612 | 波音78A(大)</p>
                            </div>
                        </div>

                        <div class="planeContent">
                            <div class="planeWrapper">
                                <div class="timeContent">
                                    <p class="startTime">22:10</p>
                                    <p class="planeRight">
                                        <span>2小时25分</span>
                                        <img :src="planeRightImage" alt="">
                                    </p>
                                </div>
                                <div class="priceContent">
                                    <p class="finishTime">00:35</p>
                                    <p class="price">¥830</p>
                                </div>
                            </div>
                            <div class="stationWrapper">
                                <div class="startWrapper">
                                    <p class="start">浦东T2</p>
                                </div>
                                <div class="finishWrapper">
                                    <p class="finish">首都T1</p>
                                    <p class="pray">6.7折</p>
                                </div>
                            </div>
                            <div class="planeCompany">
                                <p>海南航空Y87612 | 波音78A(大)</p>
                            </div>
                        </div>


                        <div class="planeContent">
                            <div class="planeWrapper">
                                <div class="timeContent">
                                    <p class="startTime">22:10</p>
                                    <p class="planeRight">
                                        <span>2小时25分</span>
                                        <img :src="planeRightImage" alt="">
                                    </p>
                                </div>
                                <div class="priceContent">
                                    <p class="finishTime">00:35</p>
                                    <p class="price">¥830</p>
                                </div>
                            </div>
                            <div class="stationWrapper">
                                <div class="startWrapper">
                                    <p class="start">浦东T2</p>
                                </div>
                                <div class="finishWrapper">
                                    <p class="finish">首都T1</p>
                                    <p class="pray">6.7折</p>
                                </div>
                            </div>
                            <div class="planeCompany">
                                <p>海南航空Y87612 | 波音78A(大)</p>
                            </div>
                        </div>


                        <div class="planeContent">
                            <div class="planeWrapper">
                                <div class="timeContent">
                                    <p class="startTime">22:10</p>
                                    <p class="planeRight">
                                        <span>2小时25分</span>
                                        <img :src="planeRightImage" alt="">
                                    </p>
                                </div>
                                <div class="priceContent">
                                    <p class="finishTime">00:35</p>
                                    <p class="price">¥830</p>
                                </div>
                            </div>
                            <div class="stationWrapper">
                                <div class="startWrapper">
                                    <p class="start">浦东T2</p>
                                </div>
                                <div class="finishWrapper">
                                    <p class="finish">首都T1</p>
                                    <p class="pray">6.7折</p>
                                </div>
                            </div>
                            <div class="planeCompany">
                                <p>海南航空Y87612 | 波音78A(大)</p>
                            </div>
                        </div>

                        <div class="planeContent">
                            <div class="planeWrapper">
                                <div class="timeContent">
                                    <p class="startTime">22:10</p>
                                    <p class="planeRight">
                                        <span>2小时25分</span>
                                        <img :src="planeRightImage" alt="">
                                    </p>
                                </div>
                                <div class="priceContent">
                                    <p class="finishTime">00:35</p>
                                    <p class="price">¥830</p>
                                </div>
                            </div>
                            <div class="stationWrapper">
                                <div class="startWrapper">
                                    <p class="start">浦东T2</p>
                                </div>
                                <div class="finishWrapper">
                                    <p class="finish">首都T1</p>
                                    <p class="pray">6.7折</p>
                                </div>
                            </div>
                            <div class="planeCompany">
                                <p>海南航空Y87612 | 波音78A(大)</p>
                            </div>
                        </div>
                    </div>
                </scroll>
            </div>
        </div>
  </div>
</template>

<script>
import VHeader from '@/components/v-header/v-header'
import Scroll from '@/components/scroll/scroll'
import planeRightImage from '@/assets/img/myhome/planeright.svg'
import { Card } from 'vux'

export default {
  data () {
    return {
      myBackgroundColor: '#00CEB9',
      priceList:
      [
        {
          id: 0,
          day: '今',
          date: '5-10',
          price: '¥255'
        },
        {
          id: 1,
          day: '明',
          date: '5-11',
          price: '¥255'
        },
        {
          id: 2,
          day: '周三',
          date: '5-12',
          price: '¥255'
        },
        {
          id: 3,
          day: '周四',
          date: '5-13',
          price: '¥255'
        },
        {
          id: 4,
          day: '周五',
          date: '5-14',
          price: '¥255'
        }
      ],
      planeRightImage: planeRightImage,
      scrollHeight: '500px'
    }
  },
  components: {
    VHeader, Scroll, Card
  },
  computed: {
  },
  mounted () {
    this.scrollHeight = window.innerHeight - 78 - 74 + 'px'
  },
  created () {
  },
  methods: {
    handleColor (index) {
      // const idx = this.priceList.findIndex(o => o.id === index)
    //   this.myBackgroundColor = '#ffffff'
    }
  },
  watch: {
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'

.planeList-wrapper {
  position fixed
  top 0
  left 0
  right 0
  bottom 0
  background-color $color-background
  .gridWrapper {
    margin-top -5px
    .card-demo-flex {
      display: flex;
    }
    .card-demo-flex > div {
        background-color #00CEB9
        padding: 10px 0px;
        flex: 1;
        text-align: center;
        font-size: 12px;
    }
    .card-demo-flex p {
        color: white;
    }
    .calendarWrapper {
        margin-top 2px
        color white
        text-align center
        p {
            margin-top 0px
        }
    }

    .planeContent {
        margin-bottom 10px
        background-color white
        padding 15px 15px
        .planeWrapper {
            display flex
            justify-content space-between
            .timeContent {
                width 48%
                display flex
                justify-content space-between
                .startTime {
                    font-weight bold
                }
                .planeRight {
                    span {
                        margin-top -5px
                        font-size $font-size-small
                    }
                    img {
                        margin-bottom 13px
                    }
                }
            }
            .priceContent {
                .finishTime {
                    font-weight bold
                }
                width 48%
                display flex
                justify-content space-between
                .price {
                    color #F2A186
                }
            }
        }
        .stationWrapper {
            margin-top -15px
            display flex
            .startWrapper {
                width 48%
                .start {
                    color $color-text-2
                    font-size $font-size-desc
                }
            }
            .finishWrapper {
                width 55%
                display flex
                justify-content space-between
                .finish {
                    margin-left 22px
                    color $color-text-2
                    font-size $font-size-desc
                }
                .pray {
                    color $color-text-2
                    font-size $font-size-desc
                }
            }
        }
        .planeCompany {
            margin-top 10px
            color $color-text-2
            font-size $font-size-desc
        }
    }
  }
}

</style>
